<template>
  <div class="chat-box-container">
    <div class="chat-box-header"></div>
    <div class="chat-box-body">
      <div class="chat-box-body-left">
        <el-menu
          background-color="#94accb"
          text-color="#c9d7e9"
          active-text-color="#fffcff"
          default-active="1"
        >
          <el-menu-item index="1">
            <i class="el-icon-chat-line-square"></i>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-s-custom"></i>
          </el-menu-item>
        </el-menu>
        <el-menu
          background-color="#94accb"
          text-color="#c9d7e9"
          active-text-color="#fffcff"
          default-active="1"
        >
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="chat-box-body-right">
        <ChatMessage></ChatMessage>
      </div>
    </div>
  </div>
</template>

<script>
import ChatMessage from './ChatMessage'
export default {
  name: 'ChatBox',
  data () {
    return {}
  },
  components: {
    ChatMessage
  }
}
</script>

<style scoped>
.chat-box-container {
  height: 550px;
  width: 700px;
}
.chat-box-header {
  background-color: #385d94;
  height: 50px;
}
.chat-box-body {
  display: flex;
  height: 500px;
}
.chat-box-body-left {
  width: 50px;
  background-color: #94accb;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.chat-box-body-right {
  width: 650px;
  background-color: aliceblue;
}
.el-menu-item {
  padding: 0 !important;
}
</style>
